<template>
  <div class="container">
    <div class="count">
      <div class="customer" v-for="iteam in customers" :key="iteam.id">
        <div class="title">{{iteam.title}}</div>
        <div class="content">
          <div class="top">
            <span>{{iteam.message}}</span>
            <div class="msg">
              {{iteam.msg}}
            </div>
            <div class="line"></div>
          </div>
          <div class="foot">
            <div class="left">{{iteam.left}}</div>
            <div class="right">{{iteam.right}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="nav_bar">
      <div class="item" v-for="iteam in tubiao" :key="iteam.id">
        <div>
          <img width="32px" height="32px" :src="iteam.src" alt="">
        </div>
        <div>{{iteam.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customers: [{
        id:1,
        title: "访问量",
        message: '25,848',
        msg:'日同比 12.5% 周同比 5% ',
        left:'总访问量',
        right:'280万'
      },{
        id:1,
        title: "销售额",
        message: '¥12,000',
        msg:'日同比 12.5% 周同比 5% ',
        left:'总销售额',
        right:'280万'
      },{
        id:1,
        title: "订单量",
        message: '25,848',
        msg:'日同比 12.5% 周同比 5% ',
        left:'转化率',
        right:'280万'
      },{
        id:1,
        title: "用户",
        message: '128位',
        msg:'日同比 12.5% 周同比 5% ',
        left:'总用户',
        right:'280万'
      }],
      tubiao:[{
        id:1,
        src:require('@/assets/img/用户.png'),
        title:'用户'
      },{
        id:2,
        src:require('@/assets/img/分析.png'),
        title:'分析'
      },{
        id:3,
        src:require('@/assets/img/标签.png'),
        title:'标签'
      },{
        id:4,
        src:require('@/assets/img/消息.png'),
        title:'消息'
      },{
        id:5,
        src:require('@/assets/img/票据.png'),
        title:'票据'
      },{
        id:6,
        src:require('@/assets/img/订单.png'),
        title:'订单'
      },{
        id:7,
        src:require('@/assets/img/产品.png'),
        title:'产品'
      },{
        id:8,
        src:require('@/assets/img/配置.png'),
        title:'配置'
      }]
    }
  },
  created(){
    console.log(this.customer);
    console.log(this.$refs);
  }
}
</script>

<style lang="scss">
.container {
  background-color: #f5f7f9;
  padding: .5em;
  margin: -.5em;
  .count{
    display: flex;
    flex-direction:row;
    flex-wrap: wrap;
    justify-content: space-between;
    .customer {
      flex: 1;
      width: 20%;
      background-color: #fff;
      height: 180px;
      border-radius: 4px;
      margin-right: 10px;
      .title {
        padding: 14px 16px;
        height: 51px;
        border-bottom: 1px solid #e8eaec;
        }
      .content{
        padding: 12px;
        .top{
          span{
            font-size: 30px;
            color: #515a6e;
          }
          .msg{
            width: 100%;
            height: 42px;
            padding-top: 8px;
            font-size: 14px;
            color: #515a6e;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            line-height: 30px;
          }
          .line{
            height:1px;
            background-color: #e8eaec;
          }
        }
        .foot{
          display: flex;
          justify-content: space-between;
          height: 30px;
          align-items: flex-end;
          .left{
            color: #515a6e;
            font-size: 14px;
          }
          .right{
            color: #515a6e;
            font-size: 14px;
          }
        }
      }
    }
  }
  .nav_bar{
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    .item{
      width: 100px;
      height: 93px;
      background-color: #fff;
      padding: 16px;
      border-radius: 4px;
      div{
        text-align: center;
        font-size: 14px;
        color: #515a6e;
      }
      div:last-child{
        margin-top: 10px;
      }
    }
  }
}
</style>